<template>
  <div class="page page-animation">
    <!-- btn -->
    <!-- <div v-if="num===0" class="container-btn" @touchstart="touchStartHandler"><img src="@/assets/btn_animation.png" alt="" class="btn"></div> -->
    <img v-if="num===0" class="container-btn" src="@/assets/btn_animation.png" alt="" @touchstart="touchStartHandler">
    <!-- 图 -->

    <div v-if="num!==0" class="container-image-group">
      <transition name="animation">
        <div v-for="(temp, index) in 8" v-if="temp === num" :key="index" class="page container-image" @touchstart="touchStartHandler"><img :src="`./images/anmition_${num}.jpg`" alt="" class="image"></div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  created() {
    window.miva = true
  },
  methods: {
    touchStartHandler() {
      const miva = document.querySelector('#bgm')
      console.log(miva)
      miva.play(-1)
      if (this.num === 8) return this.$router.goTo(this, 'open')
      this.num++
    }
  }
}
</script>

<style lang="less">
.animation-enter-active,
.animation-leave-active {
  transition: all 0.8s;
}
.animation-enter,
.animation-leave-to {
  // height: 0 !important;
  // padding: 0 !important;
  border-width: 0 !important;
  opacity: 0;
}
</style>

<style lang="less" scoped>
.page-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .container-btn {
    pointer-events: initial;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
